<html>

	<head>

		<title>mi</title>
		<link href="font/css/font-awesome.css" rel="stylesheet">
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				font-family: "微软雅黑";
			}
			
			ul,li {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.clear::before {
				height: 0;
				display: block;
				line-height: 0;
				visibility: hidden;
				content: "";
				clear: both;
			}
			
			.clear::after {
				height: 0;
				display: block;
				line-height: 0;
				visibility: hidden;
				content: "";
				clear: both;
			}
			
			.mtop {
				width: 100%;
				box-sizing: border-box;
			}
			
			.mtop_top {
				width: 100%;
				background: rgb(51, 51, 51);
			}
			
			.mtop_content {
				width: 1200px;
				margin: auto;
			}
			
			.mtop_content ul {
				float: left;
			}
			
			.mtop_content li {
				float: left;
				font-size: 12px;
				color: rgb(176, 176, 176);
				padding: 10px;
				cursor: pointer;
			}
			
			.mtop_content li:hover{
				color:#FFFFFF;
			}
			
			.mtop_right {
				float:right;
			}
			.mi_user{
				text-align: center;
				width:120px;
				padding: 10px;
				background: rgb(66, 66, 66);;
				box-sizing: border-box;
				position: relative;
			}
			.mi_user:hover{
				color: rgb(176, 176, 176);
				background:#FFFFFF;
			}
			.mi_user:hover .mi_user_menu{
			    overflow: auto;
			    height:120px;
			    border:1px solid lightgray;
			    border-top: 0;
			    box-sizing: border-box;
	        }
		
			.mi_user_menu{
				left: 0;
				top:36px;
				height:0;
				background: #FFFFFF;
				position: absolute;
				overflow: hidden;
				box-sizing: border-box;
				transition: all 0.5s;
				z-index: 1;
			}
			.mi_user_menu li{
				padding:5px 10px;
				width:120px;
				box-sizing: border-box;
				cursor: pointer;
			}
			.mi_user_menu li:hover{
				background: lightgray;
			}
			.shopcar{
				text-align: center;
				width:150px;
				padding: 10px;
				background: rgb(66, 66, 66);;
				box-sizing: border-box;
				position: relative;
			}
			.shopcar_content{
				left: 0;
				top:36px;
				height:0;
				font-size: 10px;
				background: #FFFFFF;
				position: absolute;
				overflow: hidden;
				box-sizing: border-box;
				transition: all 0.5s;
				z-index: 1;
			}
			.shopcar:hover{
				color: rgb(176, 176, 176);
				background:#FFFFFF;
			}
			.shopcar:hover .shopcar_content{
				overflow: auto;
			    height:80px;
			    border:1px solid lightgray;
			    border-top: 0;
			    box-sizing: border-box;
			}
			.header{
				width:100%;
			}
			.header_nav{
				width:1200px;
				margin: auto;
			}
			.mi_sing{
				width: 60px;
				height:60px;
				position: relative;
				transform-style: preserve-3d;
				transition:all 0.5s;
			}
			.mi_shape{
				width: 60px;
				height:60px;
				position: absolute;
				transition:all 0.5s;
			}
			.mi_shape:nth-child(1){
				transform: translateX(30px) rotateY(90deg);
			}
			.mi_shape:nth-child(2){
				transform: translateZ(30px);
			}
			.mi_sing:hover{
				transform: rotateY(-90deg);
			}
			.mi_shape img{
				width:100%;
				height:100%;
			}
			.header_nav ul{
				float:left;
			}
			.header_nav li{
				float:left;
				padding:10px;
				font-size: 16px;
				line-height: 60px;
				cursor: pointer;
			}
			.header_nav li:hover{
				color:orangered;
			}
			.header_nav li:hover .nav_box{
				display: block;
			}
			.header_search{
				margin-top: 15px;
				border:1px solid lightgray;
				float:right;
				position:relative;
			}
			.header_search input:nth-child(1){
				width:260px;
				height:50px;
				border:0;
				outline: none;
				float:left;
			}
			.search_btn{
				width:50px;
				height:50px;
				font-size: 28px;
				text-align: center;
				line-height: 50px;
				background: #FFFFFF;
				padding-top: 15px;
				color:gray;
				border-left:1px solid lightgray;
				box-sizing: border-box;
				float:left;
			}
			.search_btn:hover{
				color: #FFFFFF;
				background: orangered;
			}
			.search_small{
				position: absolute;
				font-size:8px;
				left:90px;
				top:15px;
			}
			.search_box{
				width:240px;
				top:70px;
				border:1px solid lightgray;
				border-top: 0;
				display: none;
				position: absolute;
			}
			.search_box li{
				width:240px;
				height:30px;
				line-height: 30px;
				font-size: 12px;
				padding: 0 20px;
				cursor: pointer;
				box-sizing: border-box;
				float:left;
			}
			.search_box li:hover{
				color: gray;
				background: lightgray;
			}
			.small_text{
				float:left;
				background: lightgray;
				padding:5px;
				margin-left:5px;
				color:gray;
				cursor: pointer;
			}
			.small_text:hover{
				color: #FFFFFF;
				background: orangered;
			}
			.nav_box{
				width:100%;
				height:240px;
				border-top:1px solid lightgray;
				border-bottom:1px solid lightgray;
				position:absolute;
				background: #FFFFFF;
				left:0;
				top:116px;
				box-sizing: border-box;
				display: none;
				z-index: 1000;
			}
			.nav_box_content{
				width:1200px;
				margin: 10px auto;
			}
	    	.nav_box_content li{
				width:130px;
				height:160px;
				border:1px solid pink;
				float:left;
				margin:5px;
			}
			.header_menu{
				width:100%;
				height:455px;
				margin-top: 10px;
				box-sizing: border-box;
			}
			.header_menubx{
				width:1200px;
				height:450px;
				margin: auto;
				overflow: hidden;
				position: relative;
			}
			.header_menubx ul:nth-child(4){
				width:4904px;
				position: absolute;
				left:0;
			}
			.header_menubx li{
				float:left;
			}
			.header_menubx img{
				width:100%;
				height:100%;
			}
			.header_menuleft{
				width:220px;
				height:100%;
				padding-top:10px ;
				position: absolute;
				background: rgba(0,0,0,0.5);
				top:0;
				left:0;
				z-index: 2;
			}
			
			.header_menuright{
				width:400px;
				height:100%;
				position: absolute;
				border:1px solid lightgray;
				background: #FFFFFF;
				top:0;
				left:220;
				z-index: 100;
				display: none;
			}
			
			.header_menuleft ul:nth-child(1) li{
				float:left;
				width:220px;
				padding:10px 35px;
				color: #FFFFFF;
				font-size: 14px;
				cursor: pointer;
				box-sizing: border-box;
			}
			.header_menuleft ul:nth-child(1) li:hover{
				background: #FFFFFF;
				color:darkgray;
			}
			.header_menuleft ul:nth-child(1) li:hover .header_menuright{
				display: block;
			}
			.header_menuleft ul:nth-child(1) .icon-angle-right{
				float:right;
			}
			.header_btns{
				width:980px;
				height:60px;
				position: absolute;
				left:220px;
				top:180px;
				z-index: 1;
			}
			.header_btn{
				text-align: center;
				font-size: 52px;
				font-weight: 100;
				color:lightgray;
				width:50px;
				height:60px;
				cursor: pointer;
			}
			.header_btn:hover{
				color:#FFFFFF;
				background: rgba(0,0,0,0.5);
			}
			.header_points{
				width:200px;
				height:30px;
				position: absolute;
				left:1000px;
				top:400px;
				z-index: 1;
			}
			.header_points li{
				width: 14px;
				height:14px;
				border:2px solid #FFFFFF;
				background: lightgray;
				overflow: hidden;
				border-radius: 7px;
				float:left;
				margin:5px 15px;
				box-sizing: border-box;
				cursor: pointer;
			}
			.header_points li:hover{
				background: #FFFFFF;
				border:2px solid lightgray;
			}
			
		</style>
	</head>

	<body>
		<div class="mtop">
			<div class="mtop_top clear">
				<div class="mtop_content clear">
					<ul>
						<li>小米商城</li>
						<li>MIUI</li>
						<li>米聊</li>
						<li>游戏</li>
						<li>多看阅读</li>
						<li>云服务</li>
						<li>金融</li>
						<li>小米移动版</li>
						<li>问题反馈</li>
						<li>SelectRegion</li>
					</ul>
					<div class="mtop_right">
						<ul>
							<li>注册</li>
							<li style="padding: 0;">
								<div class="mi_user">
									登录
									<div class="mi_user_menu">
										<ul class="clear">
											<li>个人中心</li>
											<li>我的喜欢</li>
											<li>小米账户</li>
											<li>退出登录</li>
										</ul>
									</div>
								</div>
							</li>
							<li>消息通知</li>
							<li style="padding: 0 ;">
								<div class="shopcar">
									购物车(0)
									<div class="shopcar_content">
										购物车中还没有商品，赶紧选购吧！
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		
		<div class="header">
			<div class="header_nav clear">
				<ul class="clear">
					<li>
						<div class="mi_sing">
							<div class="mi_shape">
								<img src="img/b2.png" alt=""/>
							</div>
							<div class="mi_shape">
								<img src="img/b1.png" alt=""/>
							</div>
						</div>
					</li>
					<li style="margin-left: 40px;">
						小米手机
						<div class="nav_box">
							<div class="nav_box_content clear">
								<ul class="clear">
									<li>1</li>
									<li></li>
									<li></li>
									<li>1</li>
									<li></li>
									<li></li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						小米电视
					    <div class="nav_box">
							<div class="nav_box_content clear">
								<ul class="clear">
									<li>2</li>
									<li></li>
									<li>2</li>
									<li></li>
									<li></li>
									<li></li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						小米平板
						<div class="nav_box">
							<div class="nav_box_content clear">
								<ul class="clear">
									<li>3</li>
									<li></li>
									<li></li>
									<li>3</li>
									<li></li>
									<li></li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						小米手环
						<div class="nav_box">
							<div class="nav_box_content clear">
								<ul class="clear">
									<li>4</li>
									<li></li>
									<li>4</li>
									<li></li>
									<li></li>
									<li></li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						小米平衡车
						<div class="nav_box">
							<div class="nav_box_content clear">
								<ul class="clear">
									<li>5</li>
									<li></li>
									<li>5</li>
									<li></li>
									<li></li>
									<li></li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						小米电饭锅
						<div class="nav_box">
							<div class="nav_box_content clear">
								<ul class="clear">
									<li>6</li>
									<li></li>
									<li>6</li>
									<li></li>
									<li></li>
									<li></li>
								</ul>
							</div>
						</div>
					</li>
				</ul>
				<div class="header_search">
					<input type="text">
					<div class="search_btn"><i class="icon-search"></i></div>
				    <div class="search_small">
				    	<div class="small_text">小米MIX</div>
				    	<div class="small_text">小米智能电视</div>
				    </div>
				    <div class="search_box">
				    	<ul>
				    		<li>小米5 plus</li>
				    		<li>小米5 plus</li>
				    		<li>小米5 plus</li>
				    		<li>小米5 plus</li>
				    		<li>小米5 plus</li>
				    		<li>小米5 plus</li>
				    	</ul>
				    </div>
				</div>
			</div>
		</div>
		
		<div class="header_menu">
			<div class="header_menubx">
				<div class="header_menuleft">
					<ul class="clear">
						<li>
							小米手机<i class="icon-angle-right"></i>
							<div class="header_menuright">
								header_menuright1
							</div>
						</li>
						<li>
							小米手环<i class="icon-angle-right"></i>
							<div class="header_menuright">
								header_menuright2
							</div>
						</li>
						<li>
							小米电视<i class="icon-angle-right"></i>
							<div class="header_menuright">
								header_menuright3
							</div>
						</li>
						<li>
							小米平板<i class="icon-angle-right"></i>
							<div class="header_menuright">
								header_menuright4
							</div>
						</li>
						<li>
							小米平衡车<i class="icon-angle-right"></i>
							<div class="header_menuright">
								header_menuright5
							</div>
						</li>
						<li>
							小米手表<i class="icon-angle-right"></i>
							<div class="header_menuright">
								header_menuright
							</div>
						</li>
						<li>
							小米周边<i class="icon-angle-right"></i>
							<div class="header_menuright">
								header_menuright6
							</div>
						</li>
						<li>
							小米平板<i class="icon-angle-right"></i>
							<div class="header_menuright">
								header_menuright7
							</div>
						</li>
						<li>
							小米平衡车<i class="icon-angle-right"></i>
							<div class="header_menuright">
								header_menuright8
							</div>
						</li>
				
					</ul>
				</div>
				<div class="header_btns">
					<div class="header_btn" style="float: left;" onclick="turnPic('<')"><i class="icon-angle-left"></i></div>
					<div class="header_btn" style="float: right;" onclick="turnPic('>')"><i class="icon-angle-right"></i></div>
				</div>
				<div class="header_points">
					<ul class="clear">
						<li onclick="nowPic(this,0)"></li>
						<li onclick="nowPic(this,1)"></li>
						<li onclick="nowPic(this,2)"></li>
						<li onclick="nowPic(this,3)"></li>
					</ul>
				</div>
				<ul class="clear" id="pics">
					<li><img src="img/lun1.jpg" alt=""/></li>
					<li><img src="img/lun2.jpg" alt=""/></li>
					<li><img src="img/lun3.jpg" alt=""/></li>
					<li><img src="img/lun4.jpg" alt=""/></li>
				</ul>
			</div>
		</div>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
        var index = 0;  
    	function turnPic(type){
    		if(type==">"){
    			index++;
    		}else{
    			index--;
    		}
    		if(index>3){
    			index=0
    		}else if(index<0){
    			index = 3;
    		}
    		var nLeft = -1226*index;
    		var length = $(".header_points li").length;
    		for(var i=0;i<length;i++){
    			var li = $(".header_points li:nth-child("+(i+1)+")");
    			li.css("background","lightgray");
    			li.css("border","2px solid #FFFFFF");
    		}
            var lis = $(".header_points li:nth-child("+(index+1)+")");
            lis.css("background","lightblue");
            lis.css("border","2px solid lightgray");
            $("#pics").hide();
    		$("#pics").css("left",nLeft);
    		$("#pics").fadeIn();
    	}
    	
    	function nowPic(obj,count){
    		var nLeft = -1226*count;
    		var length = $(".header_points li").length;
    		for(var i=0;i<length;i++){
    			var li = $(".header_points li:nth-child("+(i+1)+")");
    			li.css("background","lightgray");
    			li.css("border","2px solid #FFFFFF");
    		}
            var lis = $(".header_points li:nth-child("+(count+1)+")");
            lis.css("background","lightblue");
            lis.css("border","2px solid lightgray");
            $("#pics").hide();
    		$("#pics").css("left",nLeft);
    		$("#pics").fadeIn();
    		index = count;
    	}
    </script>
	</body>
</html>